<template>
  <view class="message feat-grid">

    <view class="system">
      <uv-line color="#ebebeb" />
      <view v-for="(item,index) in renderData.messageList" class="system-list">
        <view @click="handleOpen(index,item.id)" class="system-list-head fx-row-b">
          <view class="system-list-head-title">
            系统通知
            <uv-badge v-if="item.status == 'UNREAD'" :offset="[5,-20]" bgColor="red" :is-dot="true" type="success"></uv-badge>
          </view>
          <view class="system-list-head-foot fx-row-s">
            <text class="system-list-head-foot-time">{{ timeFormat(item.createdAt) }}</text>
            <uv-icon  size="20" :name="item.switch ? 'arrow-up-fill' : 'arrow-down-fill'"></uv-icon>
          </view>
        </view>
        <view v-show="item.switch" class="system-list-content">{{item.text}}</view>
      </view>

    </view>
    <view class="icon-nodata" v-if="renderData.messageList?.length<=0">
      <noData iconSize="150" text="您还没有收到任何消息哦" icon="custom-icon-queshengye1"></noData>
    </view>

  </view>
</template>
<script setup>
import {ref ,reactive,computed} from "vue";
import { timeFormat } from '@/utils/index';
import mineApi from "@/apis/mine";
import { mine } from '@/enums/constants';
import { onReachBottom } from "@dcloudio/uni-app";
import noData from '@/components/com-nodata';
const renderData = reactive({
  pageIndex:1,
  messageList:[],
})

const handleGetSystemMesList = (type)=>{
  let para = {
    pageSize:mine.pageSize,
    pageIndex:renderData.pageIndex
  }
  mineApi.getSystemMesList(para).then(res=>{
    if(res.code == 'SUCCESS'){
      if(type == 'scroll' && res.data?.length<=0){
        uni.showToast({
          icon:'none',
          title:'暂无数据了!'
        })
      }
      if(res.data?.length>=1){
        let filter = res.data.map((item,index)=>{
          item.switch = false;
          return item;
        });
        renderData.messageList= renderData.messageList.concat(filter);
        renderData.pageIndex++;
      }

    }
  })
}

//点击展开
const handleOpen=(index,messageId)=>{
  renderData.messageList[index].switch = !renderData.messageList[index].switch;

  //未读调用接口
  if( renderData.messageList[index].status == "UNREAD"){
    handleReadMessage(index,messageId);
  }
}

//标记已读
const handleReadMessage = (index,messageId)=>{
  let para = {id:messageId}
  mineApi.readMessage(para).then(res=>{
    if(res.code == 'SUCCESS'){
      renderData.messageList[index].status = "READED";
    }
  })
}


handleGetSystemMesList();
onReachBottom(()=>{
  if(renderData.messageList.length<8){return}
  handleGetSystemMesList('scroll');
})







</script>

<style lang="scss" scoped>

.message{
  background-color: $main-text-e;
  height: 100vh;

  .system-list{
    border-top:.5rpx solid $main-text-d;
    border-bottom:.5rpx solid $main-text-d;
    margin-top: 20rpx;
    padding:25rpx 30rpx;
    background-color: $main-cf;
    &-head{
      @include main-text3;
      &-title{
        font-weight: 500;
        position: relative;
        @include main-text2;
      }
      &-foot{
        &-time{
          margin-right:20rpx;
        }
      }
    }
    &-content{
      color:$main-text-b;
      border-top:.5rpx solid $main-text-d;
      padding-top: 15rpx;
      line-height: 1.8;
      @include main-line2;
    }
  }


}

</style>
